<template>
  <div class="sellerInfo">
    <div class="detail">
      <div class="name">{{sellerData.name}}</div>
      <!-- 调用评价星标组件 -->
      <div class="star">
        <star :score="sellerData.score" :size="48"></star>
      </div>
      <div class="itemBox">
        <div class="titleBox">
          <span class="line"></span>
          <span class="title">优惠信息</span>
          <span class="line"></span>
        </div>
        <div class="content">
          <!-- 优惠信息 -->
          <div class="support" v-for="(item, index) in sellerData.supports" :key="index">
            <span class="icon" :class="classMap[item.type]"></span>
            <span class="tt">{{item.description}}</span>
          </div>
        </div>
      </div>
      <div class="itemBox">
        <div class="titleBox">
          <span class="line"></span>
          <span class="title">商家公告</span>
          <span class="line"></span>
        </div>
        <div class="content">
          <!-- 商家公告 -->
          <p class="bulletin">{{sellerData.bulletin}}</p>
        </div>
      </div>
    </div>
    <div class="close">
      <!-- 关闭按钮 -->
      <i class="icon icon-close" @click="closeFn"></i>
    </div>
  </div>
</template>

<script>
  import star from './star.vue' // 评价星标组件
  export default {
    data() {
      return {
        classMap: ['decrease', 'discount', 'guarantee', 'invoice', 'special'] // 优惠图标类名
      }
    },
    props: {
      sellerData: {
        type: Array,
        required: true
      }
    },
    methods: {
      // 关闭商家信息弹窗
      closeFn() {
        this.$emit('emit-reviseIsSellerInfo') // 触发父元素中的方法实现反向修改父元素中的isSellerInfo值
      }
    },
    components: {
      star
    }
  }
</script>

<style lang="sass" scope>
.sellerInfo
  position: fixed
  left: 0
  top: 0
  right: 0
  height: 100%
  background: rgba(7, 17, 27, 0.4)
  // background: rgba(7, 17, 27, 0.8)
  backdrop-filter: blur(10rpx) // backdrop-filter只有背景模糊  filter所有模糊
  z-index: 10
  .detail
    box-sizing: border-box
    width: 750rpx
    min-height: 100%
    padding-bottom: 64rpx
    .name
      padding: 128rpx 0 32rpx 0
      font-size: 32rpx
      font-weight: 700
      line-height: 32rpx
      text-align: center
      color: rgb(255, 255, 255)
    .star
      width: 100%
      text-align: center
      font-size: 0
    .itemBox
      margin: 0 72rpx
      .content
        padding: 0 24rpx
        .support
          font-size: 0
          margin-bottom: 24rpx
          .icon
            display: inline-block
            vertical-align: top
            width: 32rpx
            height: 32rpx
            margin-right: 12rpx
            &.decrease
              background: url('../../static/images/decrease_1@3x.png') no-repeat
              background-size: 100% auto
            &.discount
              background: url('../../static/images/discount_1@3x.png') no-repeat
              background-size: 100% auto
            &.guarantee
              background: url('../../static/images/guarantee_1@3x.png') no-repeat
              background-size: 100% auto
            &.invoice
              background: url('../../static/images/invoice_1@3x.png') no-repeat
              background-size: 100% auto
            &.special
              background: url('../../static/images/special_1@3x.png') no-repeat
              background-size: 100% auto
          .tt
            display: inline-block
            margin-top: 4rpx
            font-size: 24rpx
            font-weight: 200
            line-height: 24rpx
            color: #fff
        .bulletin
          text-align: justify
          font-size: 24rpx
          font-weight: 200
          line-height: 48rpx
          color: #fff
      .titleBox
        display: flex
        font-size: 0
        margin: 56rpx 0 48rpx 0
        text-align: center
        .line
          flex: 1
          position: relative
          top: -12rpx
          border-bottom: 1rpx solid rgba(255, 255, 255, 0.2)
        .title
          vertical-align: middle
          margin: 0 24rpx
          font-size: 28rpx
          font-weight: 700
          line-height: 28rpx
          color: #fff
  .close
    margin-top: -64px
    width: 750rpx
    height: 64rpx
    text-align: center
    .icon
      font-size: 64rpx
      color: rgba(255, 255, 255, 0.5)
</style>
